@import (reference) 'icons';

/* header and mobile menu icons */
@arrow-white-right: url(/img/icons/menu/arrow-white-right.svg);
@menu-back-icon: url(/img/icons/menu/arrow-white-left.svg);

@power-hover-icon: url(/img/icons/menu/power-submit-300.svg);
@drop-down-hover-icon: url(/img/icons/menu/arrow-down-blue.svg);

@widnows-icon: url(/img/icons/menu/windows.svg);
@macos-icon: url(/img/icons/menu/apple.svg);
@linux-icon: url(/img/icons/menu/linux.svg);

@leasing-icon-active: url(/img/icons/menu/leasing-submit-300.svg);
@transactions-icon-active: url(/img/icons/menu/transactions-submit-300.svg);
@portfolio-icon-active: url(/img/icons/menu/portfolio-submit-300.svg);
@wallet-icon-active: url(/img/icons/menu/dashboard-submit-300.svg);
/* end */

.logo {
  background: @logo-header;

  &-footer {
    background: @logo-footer;
  }
}

.icon-close {
  width: 40px;
  height: 40px;
  background: url(/img/icons/close.svg) center no-repeat;
  background-size: 16px;
  display: inline-block;
  cursor: pointer;
  right: 17px;
  position: absolute;
  top: 10px;
  z-index: 13;
  @media screen and (max-width: 540px) {
    right: 8px;
    top: 8px;
  }
}

.sign-error-icon {
  background: @error-circle-icon;
  background-repeat: no-repeat;
  background-position: center center;
  height: 80px;
  width: 80px;
  margin: 0 auto 30px auto;
}

.visa-icon {
  display: block;
  width: 42px;
  height: 42px;
  background: url(/img/icons/visa-icon.svg) center no-repeat;
}

.mastercard-icon {
  display: block;
  width: 42px;
  height: 42px;
  background: url(/img/icons/mastercard-icon.svg) center no-repeat;
}

.card-success-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: @card-success-icon center no-repeat;
  margin: 60px auto 20px auto;
}

.bank-success-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url(/img/icons/bank-success.svg) center no-repeat;
  margin: 60px auto 20px auto;
}

.bank-building-success-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url(/img/icons/bank-building-success.svg) center no-repeat;
  margin: 60px auto 20px auto;
}

.verified-icon {
  background: url(/img/icons/input-valid-icon.svg) center center no-repeat rgba(129, 201, 38, 0.1);
  border-radius: 100%;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.confirm-order__icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url(/img/icons/transaction-warning.svg) center no-repeat;
}

.icon-qr::before {
  background-image: url(/img/icons/qr-code-small.svg);
}

.icon-tx-success {
  background-image: url(/img/icons/check.svg);
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  margin: 60px auto 20px auto;
}

.icon-script-warning {
  background: url(/img/icons/script-warning-icon.svg) center no-repeat;
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  margin: 60px auto 20px auto;
}

.icon-tx-create-alias {
  &::before {
    background-position-x: 0;
    display: block;
  }
  background-color: rgba(53, 165, 245, 0.1);
}

.icon-tx-cancel-leasing {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size;
  }
  background-color: rgba(239, 72, 41, 0.1);
}

.icon-tx-exchange {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 2;
  }
  background-color: rgba(171, 125, 246, 0.1);
}

.icon-tx-receive {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 3;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-circular {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 4;
  }
  background-color: rgba(239, 72, 41, 0.1);
}

.icon-tx-send {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 5;
  }
  background-color: rgba(255, 175, 0, 0.1);
}

.icon-tx-lease {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 6;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-burn {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 7;
  }
  background-color: rgba(255, 175, 0, 0.1);
}

.icon-tx-issue {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 8;
  }
  background-color: rgba(38, 193, 201, 0.1);
}

.icon-tx-reissue {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 9;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-incoming-leasing {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 10;
  }
  background-color: rgba(90, 129, 234, 0.1);
}

.icon-tx-unknown {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 11;
  }
  background-color: rgba(153, 153, 153, 0.1);
}

.icon-tx-mass-transfer {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 12;
  }
  background-color: rgba(255, 175, 0, 0.1);
}

.icon-tx-mass-receive {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 13;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-spam {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 3;
    background-position-y: bottom;
  }
  background-color: rgba(153, 153, 153, 0.1);
}

.icon-tx-mass-spam {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 13;
    background-position-y: bottom;
  }
  background-color: rgba(153, 153, 153, 0.1);
}

.icon-tx-data {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 14;
  }
  background-color: rgba(90, 129, 234, 0.1);
}

.icon-tx-data-vote {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 23;
  }
  background-color: rgba(90, 129, 234, 0.1);
}

.icon-tx-sponsorship-start {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 15;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-sponsorship-stop {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 18;

  }
  background-color: rgba(239, 72, 41, 0.1);
}

.icon-tx-sponsorship-plus {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 17;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-set-script {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 19;
  }
  background-color: rgba(129, 201, 38, 0.1);
}

.icon-tx-cancel-script {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 20;
  }
  background-color: rgba(239, 72, 41, 0.1);
}

.icon-tx-set-asset-script {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 21;
  }
  background-color: rgba(90, 129, 234, 0.1);
}

.icon-tx-script-invocation {
  &::before {
    display: block;
    background-position-x: -@tx-icon-size * 22;
  }
  background-color: rgba(90, 129, 234, 0.1);
}

.icon-info {
  width: 20px;
  height: 20px;
  background: @info-icon center no-repeat;
  display: block;
}

.icon-filter {
  background-position: center;
  background-repeat: no-repeat;
  background-image: @filter-icon;
  display: inline-block;
}

.icon-lock {
  width: 16px;
  height: 16px;
  background: url(/img/icons/icon-lock.svg) left center no-repeat;
  display: block;
}

.icon-browser {
  width: 80px;
  height: 80px;
  background: url(/img/icons/userimg-browsershare-80-submit-300.svg) center no-repeat;
  display: block;
}

.icon-grey-warning {
  width: 16px;
  height: 16px;
  background: url(/img/icons/info-14-basic-700.svg) left center no-repeat;
  display: block;
}

.icon-disconnected {
  display: block;
  margin: 20px auto 20px auto;
  width: 80px;
  height: 80px;
  background: url(/img/no-preload/not-supported-browser.svg) center top no-repeat;
}

.icon-browser-warning {
  display: block;
  margin: 80px auto 20px auto;
  width: 80px;
  height: 80px;
  background: url(/img/no-preload/userimg-browserwarning-80-mix-sunset.svg) center top no-repeat;
}

.icon-connected {
  display: block;
  width: 80px;
  height: 80px;
  background: url(/img/icons/icon-connected.svg) center top no-repeat;
}

.icon-document {
  display: block;
  margin: 60px auto 20px auto;
  width: 80px;
  height: 80px;
  background: url(/img/icons/icon-document.svg) center no-repeat;
}

.icon-sorting {
  display: inline-block;
  margin-left: 4px;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  background: @sorting-icon center top no-repeat;
}

.icon-dex-arrow {
  display: inline-block;
  background-image: @dex-toggle-icon;
  background-repeat: no-repeat;
  background-position: center center;
}

.icon-dex-tospread {
  display: inline-block;
  background-image: @orderbook-to-spread-icon;
  background-repeat: no-repeat;
  background-position: center center;
}

.icon-dex-tospread-active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: @orderbook-to-spread-icon-active;
}

.apple-store-btn,
.google-play-btn {
  width: 135px;
  height: 42px;
  display: block;
}

.apple-store-btn {
  background: url(/img/icons/apple-store-icon.svg) center no-repeat;
}

.google-play-btn {
  background: url(/img/icons/google-play-icon.svg) center no-repeat;
}

.keeper-icon {
  background: url(/img/icons/keeper-icon.svg) center no-repeat;
}

.promo-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;

  &-min {
    display: block;
    width: 24px;
    height: 24px;
  }

  &-arrow-right {
    background: url(/img/landing/arrow-white-right.svg) center no-repeat;
  }

  &-api {
    background: url(/img/landing/api.svg) center no-repeat;
  }

  &-create-token {
    background: url(/img/landing/create-token.svg) center no-repeat;
  }

  &-fees {
    background: url(/img/landing/fees.svg) center no-repeat;
  }

  &-gateways {
    background: url(/img/landing/gateways.svg) center no-repeat;
  }

  &-ledger {
    background: url(/img/landing/ledger.svg) center no-repeat;
  }

  &-schield {
    background: url(/img/landing/schield.svg) center no-repeat;
  }

  &-dex {
    background: url(/img/landing/decentralized.svg) center no-repeat;
  }

  &-wallet {
    background: url(/img/landing/wallet.svg) center no-repeat;
  }
}

.icon-dex {
  &-lock {
    background: @dex-lock-icon;
  }

  &-paper {
    background: @dex-paper-icon;
  }

  &-create {
    background: @dex-create-icon;
  }
}

.import-modal__icon {
  &-beta {
    background: @import-modal-icon-beta;
  }

  &-old {
    background: @import-modal-icon-old;
  }

  &-ledger {
    background: @import-modal-icon-ledger;
  }

  &-keeper {
    background: @import-modal-icon-keeper;
  }

  &-error {
    background: @import-modal-icon-error;
  }
}

.roadmap-icon {
  &-past {
    background-image: @roadmap-check-icon;
  }

  &-now {
    background-image: @roadmap-check-linear-icon;
  }

  &-future {
    background-image: @roadmap-mantle-linear-icon;
  }
}

.icon-eye {
  width: 14px;
  height: 14px;
  background: @eye-icon center no-repeat;

  &_active {
    background: @eye-icon-active center no-repeat;
  }
}
